<template>
    <div>
        <ul>
            <li v-for="(item,index) in arr" :key=index>
                {{item}}
            </li>
        </ul>
        <!-- 翻转：会更新页面 -->
        <button @click="rev">翻转</button>
        <!-- 截取：不会更新页面，因为没有修改原数组 -->
        <button @click="updata">更新值</button>
        <ul>
            <li v-for="(item,index) in arr2" :key="index">
                {{item.age}}
            </li>
        </ul>
        <button @click="changaAge">修改age</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr:[10,20,30],
            arr2:[
                {age:18}
            ]
        };
    },
    methods: {
        rev(){
            this.arr.reverse()
        },
        sli(){
            // this.arr.splice()
            // 截取
            // 参数1：从哪个位置开始截取
            // 参数2：结束的索引，截取到哪里去
            // 包头不包尾
            // 不会修改原数组
            // 解决方案：覆盖到原数组即可
            this.arr=this.arr.slice(1,2)
        }
    },
    update(){
        //使用数组的索引值修改数据
        //this.arr[0]='a'
        //vue2知道自己存在这个问题，所以提供了一种方案来解决问题：this.$set 方法
        //参数1：要修改的数据（对象或数组）
        //参数2：要修改的索引（键）
        // 参数3：要修改成什么值
        this.$set(this.arr,0,'a')
    },
    cahngeAge(){
        this.arr[2].age=28//网页能刷新
    }
};
</script>

<style lang="scss" scoped>

</style>